<%--
  Created by IntelliJ IDEA.
  User: 86181
  Date: 2022/11/1
  Time: 18:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--bootstrap-->
    <!--bootstrap-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-table.css">
    <link rel="stylesheet" href="css/bootstrap-extend.css">
    <!--script-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/jquery.form.js"></script>
    <script src="js/messages_zh.js"></script>
    <script src="js/bootstrap-table.js"></script>
    <script src="js/bootstrap-extend.js"></script>
    <script src="js/bootstrap-table-zh-CN.js"></script>
    <script src="js/echarts.js"></script>


    <style>
        a{
            text-decoration:none;
            color:black;
        }
        #accordion div[class='panel-body']:hover{
            text-decoration:none;
            color:black;
            background-color:lightgray;
        }
        li{
            display:block;
            border:none;
        }
    </style>
</head>
<body>
        <input type="hidden" id="usernameimg" value="${username}">
        <!--头部-->
        <nav class="navbar navbar-default">
            <!--精简导航-->
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-traget="#nav1">
                    <span class="glyphicon glyphicon-th-large"></span>
                </button>
            </div>
            <!--普通导航-->
            <div id="nav1" class="row collapse navbar-collapse">
                <ul class="nav navbar-nav" id="menusfumenus">
                    <li><a></a></li>
                    <li><a></a></li>
                </ul>


                <ul class="nav navbar-nav navbar-right">
                    <li><a>已登录</a></li>
                    <li><a>|</a></li>
                    <li><a onclick="loginout()">退出登录</a></li>
                    <li><a>|</a></li>
                    <li class="dropdown">
                        <a  class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <img class="imgs" style="width:40px;border-radius:50%;margin-top:-10px;">
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li>
                                <div align="center" class="row" style="width:200px;height:200px">
                                    <br>
                                    <img  class="imgs"  style="width:40px;border-radius:50%;margin-top:-10px;">
                                    <br>
                                    <div>
                                        <h5><strong>欢迎来到本系统</strong></h5>
                                        用户:<strong><span id="session"></span></strong>
                                        <br>
                                        状态:<span id="statuss"></span>

                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li><a> </a></li>
                    <li><a> </a></li>
                </ul>
            </div>
        </nav>
        <%--<!--手风琴-->
        <div class="row">--%>
            <div  class="col-md-2" id="accordion" role="tablist" aria-multiselectable="true" style="height:100%;background-color:ghostwhite">
            </div>
            <!-- tab选项卡-->
            <div class="col-lg-10">
                <div id="tab1">

                </div>
            </div>
        </div>




        <script>
            //退出登录
            function loginout(){
                if(confirm("您确定退出登录?退出后将重新获取账号密码")){
                    location.href="loginout.action";
                }
            }

            //初始化选项卡
            $("#tab1").initTabs();
            //加入一个 首页
            $("#tab1").addTabs("首页", "glyphicon glyphicon-tower", "welcome.jsp", "", false);

            //手风琴控件 点击
            $("#accordion").click(function (e) {
                //当前点击的是li元素 才做处理
                if($(e.target).hasClass("list-group-item")){
                    //所有的li元素去除active样式
                    $("#accordion li").removeClass("active");
                    //点击li元素 加上active样式
                    $(e.target).addClass("active");
                    //追加新的tab页
                    $("#tab1").addTabs($(e.target).text(), "glyphicon glyphicon-tower",$(e.target).attr("href"), "", true);

                }

            })

            $(function () {
                usernamesimg();
                $.post("queryByMenusMenuid.action",function (data) {
                        var arr=["glyphicon glyphicon-file","glyphicon glyphicon-check","glyphicon glyphicon-briefcase"];
                        $(data).each(function (index,item) {
                            //创建li
                            var li=$("<li></li>")
                            //创建a标签
                            var a=$("<a onclick='queryMenusSon("+item.seq+")'></a>")
                            var text=$("<input type='text' style='display: none'>")
                            a.attr("href","#")
                            a.text(item.name)
                            text.val(item.seq)
                            a.append(text);
                            li.append(a);
                            $("#menusfumenus").append(li)

                        })
                },"json")
                queryMenusSon(1)
                //加载账户
                $.get("getsesstion.action",function (data) {
                    $("#session").text(data.username)
                    usernames=data.username;
                },"json")
            })

            //查询子菜单
            function queryMenusSon(menuseg) {
                $.post("queryByMenusSon.action", {"menuseg": menuseg}, function (data) {
                    /*$(data).each(function (index,item) {
                             var divpanel=$("<div></div>")
                             $("#accordion").append(divpanel)
                             divpanel.addClass("panel panel-default")
                             var divheading=$("<div></div>")
                             divheading.addClass("panel-heading")
                             divheading.attr("id","headingOne"+item.seq)
                             divheading.attr("role","tab")
                             var a=$("<a></a>")
                             a.attr("role","button")
                             a.attr("data-toggle","collapse")
                             a.attr("data-parent","#accordion")
                             a.attr("href","#collapseOne"+item.seq)
                             a.attr("aria-expanded",true)
                             a.attr("aria-controls","collapseOne"+item.seq)
                             a.text(item.name)
                             divheading.append(a)
                             divpanel.append(divheading)
                             //子菜单
                             var divson=$("<div></div>")
                             divson.attr("id","collapseOne"+item.seq)
                             divson.addClass("panel-collapse collapse in")
                             divson.attr("role","tabpanel")
                             divson.attr("aria-labelledby","headingOne"+item.seq)
                             divpanel.append(divson)
                             $(item.menus).each(function (index,item) {
                                 var divbody=$("<div></div>")
                                 divbody.addClass("panel-body")
                                 var li=$("<li></li>")
                                 li.addClass("list-group-item")
                                 li.text(item.name)
                                 li.append("<span class='glyphicon glyphicon-menu-right'></span>")
                                 li.attr("href",item.linkurl)
                                 divbody.append(li)
                                 divson.append(divbody)
                             })
                         })*/
                    //$("#divpanel").remove();
                    let param = {
                        data: {
                            // 获取数据有一下参数,选填一个类别即可
                            // ************** 从url获取数据 ******************
                            //从url获取数据
                            url: "queryByMenusSon.action?menuseg=" + menuseg,
                            //请求类型
                            type: 'get',
                            //url请求时执行函数,函数返回值为请求参数,function(){return data},
                            subFunc: undefined,
                            //************** 从变量获取数据 ******************
                            //从变量获取数据
                            //variable : treeData,
                            //************** 从自定义方法获取数据 ******************
                            //自定义方法获取数据,function(){return data},
                            //func : undefined
                        },
                        process: {
                            //是否打开树节点,默认false,可以为boolean值值或function(item,index,layer){return boolean},
                            open: false,
                            //显示的图标,bootstrap的图标样式,字段名或者function(item,index,layer){return str | jqueryObj},
                            //icon : 'icon',
                            //checkbox,如果为undefined将不显示checkbox,
                            //你可以直接写 checkbox : function(item,index,layer){return checkboxObj} ,函数返回一个checkbox对象
                            //当然也可以像下面这样
                            checkbox: undefined,
                            //标题(鼠标悬停时显示),字段或者function(item,index,layer){return str},
                            title: undefined,
                            //树节点显示内容,字段或者function(item,index,layer){return str},
                            text: 'name',
                            //后面的自定义内容,function(item,index,layer){return JQueryObj},
                            after: undefined,
                            //子级(list集合),字段名或者function(item,index,layer){return list}
                            child: 'menus',
                            //节点点击事件
                            //可以直接 onChick : function(e,node,type){return void} ,node为当前节点(span)的jquery对象
                            //当然也可以像下面这样
                            onChick: {
                                //是否启用,默认true,可以为boolean值或function(item,index,layer){return boolean},
                                enable: undefined,
                                //点击执行方法,function(e,checkbox,type){return void} ,node为当前节点(span)的jquery对象
                                func: function (e, node, type) {
                                }
                            },
                            //当以上操作全部完成后,执行自定义操作,function (liObj,item,index,layer) {return void},liObj为当前列表的jquery对象
                            custom: undefined
                        },
                        //节点树是否占满父级节点
                        fill: true,
                        //字体大小
                        fontSize: 15
                    }
                    $("#accordion").loadTree(param);
                    //获取可点击菜单
                    $.post("queryByMenusSon.action", {"menuseg": menuseg}, function (data) {
                        var bindingEventMenu = [];

                        $(data).each(function (index, item) {
                            if (item.menus== null) {
                                bindingEventMenu.push(item);
                                //console.log(bindingEventMenu)
                            }
                            //console.log(bindingEventMenu)
                            $(item.menus).each(function (index3, item3) {
                                if (item3.menus==null) {
                                    bindingEventMenu.push(item3);
                                    //console.log("2")
                                }
                                $(item3.menus).each(function (index4, item4) {
                                    if (item4.menus ==null) {
                                        bindingEventMenu.push(item4);
                                    }
                                })
                            })

                        })
                        var liMenus = $("#accordion ul li[class!='parentLi']");
                        $(bindingEventMenu).each(function (index,item) {
                            $(liMenus[index]).html("<span><a url='"+item.linkurl+"'>"+item.name+"</a></span>");
                            // console.log(item)
                        })
                        $("#accordion ul li[class!='parentLi'] a").click(function (e) {//$(e.target).attr("url")
                            $("#tab1").addTabs($(e.target).text(),"glyphicon glyphicon-euro",$(e.target).attr("url"),"",true);
                        })
                    }, "json")

                }, "json");

                $("#accordion").empty();

            }
            //加载数据头像数据
            function usernamesimg() {
                var usersimagename=$("#usernameimg").val();
                $.post("queryimg.action",{"username":usersimagename},function (data) {
                    $(".imgs").attr("src",data.photopath)
                    if(data.status==0){
                        $("#statuss").text("正常")
                    }else {
                        $("#statuss").text("异常")
                    }
                },"json")
            }

        </script>
</body>
</html>
